<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换</title>
</head>
<body>
    <!--translate()方法-->
    <h1>translate() 方法</h1>
    <p>translate() 方法从元素当前位置对其进行移动：</p>
    <div class="tra">
    该 div 元素从其当前位置向右移动 10 个像素，并向下移动 15 个像素。
    </div>
    <style> 
        .tra {
          width: 300px;
          height: 100px;
          background-color: rgb(187, 226, 241);
          border: 1px solid black;
          -ms-transform: translate(10px,15px); /* IE 9 */
          transform: translate(10px,15px); /* 标准语法 */
        }
    </style>

    <!--rotate() 方法-->
    <h1>rotate() 方法</h1>
    <p>rotation() 方法顺时针或逆时针旋转元素。</p>
    <div class="rot">
       这是一个普通的 div 元素。
    </div>
    <div class="rot" id="myDiv">
       这个 div 元素顺时针旋转 20 度。
    </div>
    <style>
        .rot {
          width: 300px;
          height: 100px;
          background-color: rgb(239, 181, 218);
          border: 1px solid black;
        }  
        div#myDiv {
          -ms-transform: rotate(20deg); /* IE 9 */
          transform: rotate(20deg); /* 标准语法 */
        }
    </style>

    <!--scale() 方法-->
    <h1>scale() 方法</h1>
    <p>scale() 方法增加或缩减元素的尺寸。</p>
    <div class="sca">
        该 div 元素是其原始宽度的一点五倍，是其原始高度的两倍。
    </div>
    <style>
        .sca{
            margin: 150px;
            width: 200px;
            height: 100px;
            background-color: rgb(183, 240, 192);
            border: 1px solid black;
            -ms-transform: scale(1.5,2); /* IE 9 */
            transform: scale(1.5,2); /* 标准语法 */
            }
    </style>
    更多请查看链接
    <a href="https://www.w3school.com.cn/css/css3_2dtransforms.asp">2D转换</a>
    
</body>
</html>